<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <!-- Page pre-title -->
        <!-- <div class="page-pretitle">
          子标题
        </div> -->
        <h2 class="page-title" id="article_list_board_title">首页</h2>
        <!-- 帖子数量 -->
        <div class="text-muted mt-1" id="article_list_count_board"></div>
      </div>
      <!-- Page title actions -->
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <!-- 发新帖按钮 宽屏 -->
          <a
            href="javascript:void(0);"
            class="btn btn-primary d-none d-sm-inline-block article_post"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 5l0 14" />
              <path d="M5 12l14 0" />
            </svg>
            发布帖子
          </a>
          <!-- 发新帖按钮 窄屏 -->
          <a
            href="javascript:void(0);"
            class="btn btn-primary d-sm-none btn-icon article_post"
            aria-label="发布帖子"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 5l0 14" />
              <path d="M5 12l14 0" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row justify-content-center">
      <!-- 显示列表的宽度 -->
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <div class="divide-y" id="artical-items-body">
              <!-- 动态生成帖子列表 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 正文 结束 -->
</div>
<script>
  $(function () {
    // ========================= 获取版块下帖子信息 =======================
    // 获取当前选中的版块
    let activeLiEl = $("#topBoardList>.active");
    // 构造query string
    let queryString = "";
    let boardData = activeLiEl.data("board");
    // 导航栏版块Item是否绑定版块数据
    if (boardData) {
      // 构造query string
      queryString = "?boardId=" + boardData.id;
      // 获取版块信息
      getBoardInfo(boardData.id);
    } else {
      // 设置版块名称
      $("#article_list_board_title").html("首页");
      $("#article_list_count_board").hide();
    }

    // ========================= 获取版块信息 =======================
    function getBoardInfo(boardId) {
      if (!boardId) {
        return;
      }
      // 发送请求， 成功后，显示版块相关信息
      $.ajax({
        type: "GET",
        url: "board/getbyid",
        data: { boardId: boardId },
        success: function (respData) {
          if (respData.code == 0) {
            let board = respData.data;
            $("#article_list_board_title").html(board.name);
            $("#article_list_count_board").html(
              "帖子数量: " + board.articleCount
            );
          } else {
            $.toast({
              heading: "失败",
              text: repsData.message,
              icon: "warning",
            });
          }
        },
        error: function () {
          $.toast({
            heading: "异常",
            text: "查询异常，请及时联系管理员",
            icon: "error",
          });
        },
      });
    }

    // ========================= 获取帖子列表 =======================
    // 成功后，调用listBuildArticleList()方法，构建帖子列表
    $.ajax({
      type: "GET",
      url: "article/getAllByBoardId" + queryString,
      success: function (respData) {
        if (respData.code == 0) {
          listBuildArticleList(respData.data);
        } else {
          $.toast({
            heading: "失败",
            text: repsData.message,
            icon: "warning",
          });
        }
      },
      error: function () {
        $.toast({
          heading: "异常",
          text: "查询异常，请及时联系管理员",
          icon: "error",
        });
      },
    });

    // ========================= 构造帖子列表 =======================
    function listBuildArticleList(data) {
      if (data.length == 0) {
        $("#artical-items-body").html("还没有帖子");
        return;
      }
      // 默认头像路径
      let avatarUrl = "image/avatar01.jpeg";
      // 遍历结果
      data.forEach((article) => {
        // 设置默认头像
        if (!article.user.avatarUrl) {
          article.user.avatarUrl = avatarUrl;
        }
        // 构造HTML
        let articleHtmlStr =
          "<div>" +
          ' <div class="row">' +
          ' <div class="col-auto">' +
          ' <span class="avatar" style="background-image: url(' +
          article.user.avatarUrl +
          ')"></span>' +
          " </div>" +
          ' <div class="col">' +
          ' <div class="text-truncate">' +
          ' <a href="javascript:void(0);" class="article_list_a_title">' +
          " <strong>" +
          article.title +
          "</strong>" +
          " </a>" +
          " </div>" +
          ' <div class="text-muted mt-2">' +
          ' <div class="row">' +
          ' <div class="col">' +
          ' <ul class="list-inline list-inline-dots mb-0">' +
          ' <li class="list-inline-item">' +
          ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user"' +
          ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"' +
          ' fill="none" stroke-linecap="round" stroke-linejoin="round">' +
          ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>' +
          ' <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>' +
          ' <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>' +
          " </svg> " +
          article.user.nickname +
          " </li>" +
          ' <li class="list-inline-item">' +
          ' <svg xmlns="http://www.w3.org/2000/svg"' +
          ' class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"' +
          ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"' +
          ' stroke-linecap="round" stroke-linejoin="round">' +
          ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>' +
          ' <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>' +
          ' <path d="M12 7v5l2 2"></path>' +
          ' <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z">' +
          " </path>" +
          " </svg> " +
          article.createTime +
          " </li>" +
          " </ul>" +
          " </div>" +
          ' <div class="col-auto d-none d-md-inline">' +
          ' <ul class="list-inline list-inline-dots mb-0">' +
          ' <li class="list-inline-item">' +
          ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye"' +
          ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"' +
          ' fill="none" stroke-linecap="round" stroke-linejoin="round">' +
          ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>' +
          ' <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>' +
          " <path" +
          ' d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">' +
          " </path>" +
          " </svg> " +
          article.visitCount +
          " </li>" +
          ' <li class="list-inline-item">' +
          ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart"' +
          ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"' +
          ' fill="none" stroke-linecap="round" stroke-linejoin="round">' +
          ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>' +
          " <path" +
          ' d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572">' +
          " </path>" +
          " </svg> " +
          article.likeCount +
          " </li>" +
          ' <li class="list-inline-item">' +
          ' <svg xmlns="http://www.w3.org/2000/svg"' +
          ' class="icon icon-tabler icon-tabler-message-circle" width="24" height="24"' +
          ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"' +
          ' stroke-linecap="round" stroke-linejoin="round">' +
          ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>' +
          ' <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>' +
          ' <path d="M12 12l0 .01"></path>' +
          ' <path d="M8 12l0 .01"></path>' +
          ' <path d="M16 12l0 .01"></path>' +
          " </svg> " +
          article.replyCount +
          " </li>" +
          " </ul>" +
          " </div>" +
          " </div>" +
          " </div>" +
          " </div>" +
          " </div>" +
          " </div>";
        // 转为元素对象
        let articleItem = $(articleHtmlStr);
        // 获取标题的 a 标签
        let articleTitle = articleItem.find(".article_list_a_title");
        // 处理标题点击事件
        articleTitle.click(function () {
          // 通过全局变量保存当前访问的帖子信息
          currentArticle = article;
          removeNavActive();
          $("#bit-forum-content").load("details.html");
        });
        // 添加到列表
        $("#artical-items-body").append(articleItem);
      });
    }

    // ================== 处理发贴事件 =====================
    $(".article_post").click(function () {
      console.log("加载发贴页面");
      removeNavActive();
      $("#bit-forum-content").load("article.html");
    });
  });
</script>
